<template>
  <van-nav-bar class="tabber" @click-left="onClickLeft">
    <div class="tabber-title" slot="title">{{ title }}</div>
    <i
      v-if="left == 'arrow'"
      class="iconfont icon-arrowleft icon-size18"
      slot="left"
    ></i>
    <i
      v-if="right == 'export'"
      class="iconfont icon-daochu icon-size18"
      slot="right"
    ></i>
    <van-icon
      v-if="right == 'ellipsis'"
      slot="right"
      color="#333"
      class="icon-size18"
      name="ellipsis"
    />
    <div v-if="right == 'ok'" class="font16" slot="right" @click="confire">
      确定
    </div>
  </van-nav-bar>
</template>

<script>
import Vue from "vue";
import { NavBar, Icon, Toast } from "vant";

Vue.use(NavBar).use(Icon).use(Toast);
export default {
  name: "top",
  props: {
    title: String,
    left: String,
    right: String,
    from: String,
  },
  computed: {
    isTakeSelf() {
      return this.$store.getters.isTakeSelf;
    },
    currentAddress() {
      return this.$store.getters.currentAddress;
    },
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    confire() {
      if (JSON.stringify(this.currentAddress) == "{}") {
        Toast("请选择");
      } else {
        if (this.from == "/home" || this.from == "/commodity") {
          this.$router.push("/commodity");
          this.$store.dispatch("setIsTakeSelf", 0);
        } else if(this.from == "/payment") {
          this.$router.push("/payment");
          this.$store.dispatch("setIsTakeSelf", 0);
        }
      }
    },
  },
};
</script>

<style scoped>
.tabber {
  position: fixed;
  height: 2.13rem;
  line-height: 1.457rem;
  left: 0px;
  top: 0px;
  right: 0px;
  display: flex;
  flex-direction: column-reverse;
}
.tabber-title {
  font-size: 16px;
}
.icon-arrowleft {
}
.icon-size18 {
  font-size: 18px;
}
.van-hairline--bottom::after {
  border-bottom-width: 0rem;
}
</style>
